<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<!-- 1.标准盒子 内容盒子 w3c盒子 
 盒子宽：内容区宽+左右内边距+左右边距
 盒子高：内容区高+上下内边距+上下边距
 盒子所占页面宽：盒子宽+左右外边距
 盒子所占页面高：盒子高+上下外边距
 -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
.contentBox{
width: 100px;
height: 100px;
/*  border:width style color*/
border: 5px solid pink;
padding: 13px 27px 36px 24px;
margin: 15px 33px 25px 14px;






/* 内边距 文字到边框距离 padding*/
/* 上下左右内边距都为10px */
/* 上下为10px 左右为20px 下内边距为30px*/
/* padding: 10px 20px 30px; */
/* 上右下左  */
/* padding: 10px 20px 30px 40px; */
/* 设置盒子背景图片 设置盒子渐变色
background-image: url(../Day01/音视频/ad7.jpeg);
/* 设置背景图片大小尺寸 */
/* background-size: 100% 100%; */
/* 线性渐变 */
background-image: linear-gradient(to right bottom,red,blue,cyan);

} 
/* 边框盒子 怪异盒子 IE盒子 
盒子宽：内容区宽+左右内边距+左右边距=width
 盒子高：内容区高+上下内边距+上下边距=height
 盒子所占页面宽：盒子宽+左右外边距
 盒子所占页面高：盒子高+上下外边距*/
.borderBox{
    /* 开启边框盒子 默认是内容盒子content-box */
box-sizing: border-box;
width: 100px;
height: 100px;
border: 8px solid blue;
padding: 12px 24px 17px 34px;
margin: 15px 37px 12p 24px;
/* 径向渐变 */
background-image: radial-gradient(pink,orange,blue);
}
    </style>
</head>
<body>
    <div class="contentBox">标准盒子</div>
    <div class="borderBox">边框盒子</div>
    <!-- 盒模型：
     {
     盒子区别：
     标准盒子宽高是设置给内容取宽高
     标准盒子宽高是设置给盒子本身宽高
     } -->
</body>
</html>